<!-- 系统账号 -->
<template>
  <div class="container">
    <!-- 控件 -->
    <div class="controlBox">
      <el-button slot="reference" type="primary" @click="centerDialogVisible = true">+ 菜 单</el-button>
      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="40%"
        center
      >
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px">
          <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" />
          </el-form-item>

          <el-form-item label="负责人" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="联系电话" prop="phoneNum">
            <el-input v-model="form.phoneNum" />
          </el-form-item>

          <el-form-item label="账号用途" prop="purpose">
            <el-input v-model="form.purpose" />
          </el-form-item>

          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>

          <el-form-item label="权限赋予" prop="type">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="权限1" name="type" />
              <el-checkbox label="权限2" name="type" />
              <el-checkbox label="权限3" name="type" />
              <el-checkbox label="权限4" name="type" />
            </el-checkbox-group>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')">提 交</el-button>
        </span>
      </el-dialog>

    </div>
   
    <el-table
      :data="tableData"
      height="700px"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="商品名称" prop="name" />
      <el-table-column label="描述" prop="category" />
      <el-table-column label="地址" prop="address" />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            style="color:#f56c6c"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="controlBox"
      style="margin-top:20px"
      background 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">    
    </el-pagination>
  </div>
</template>

<script>
import { getMenuList,addMemu } from '@/api/user'

export default {
  components: {},
  data() {
    return {
      centerDialogVisible: false,
      currentPage:1,  //  初始页
      pagesize:10,    //  每页的数据
      form: {
        AllowedOverTime: '',
        name: '',
        date1: '',
        date2: '',
        password: '',
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { required: true, pattern: '^[0-9]{2}$', message: '请输入正确的账号，账号位2位数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { required: true, pattern: '^1[3456789]\\d{9}$', message: '请输入正确的联系电话', trigger: 'blur' }
        ],
        purpose: [
          { required: true, message: '请输入账号用途', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' },
          { required: true, pattern: '^[A-Za-z0-9]{6,8}$', message: '密码为6~8位数字和字母', trigger: 'blur' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少给予一种权限', trigger: 'change' }
        ]
      },
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        children: [{
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        children: [{
          id: '12987115',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }
        ]
      }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    getMenuList().then((res)=>{
      console.log(res);
    })
  },
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addMemu().then((res)=>{
            console.log(res)
          })
          this.$message('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
    },
  } 
}
</script>

<style lang='scss' scoped>
.container {
  padding: 20px;
  .controlBox{
     padding-bottom: 20px;
     
  }
}
</style>
